extends /default.pug

block view
  .animated.fadeIn
    .row
      .col
        .card
          .card-header
            i.fa.fa-align-justify
            |  Dropdowns
            .card-header-actions
              a.card-header-action(href='http://coreui.io/docs/components/bootstrap-dropdowns/', target='_blank')
                small.text-muted docs
          .card-body
            .row
              .col
                .btn-group
                  .dropdown
                    button#dropdownMenuButton.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                      | Dropdown button
                    .dropdown-menu(aria-labelledby='dropdownMenuButton')
                      a.dropdown-item(href='#') Action
                      a.dropdown-item(href='#') Another action
                      a.dropdown-item(href='#') Something else here
                .btn-group
                  .dropdown.show
                    a#dropdownMenuLink.btn.btn-secondary.dropdown-toggle(href='#', role='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                      | Dropdown link
                    .dropdown-menu(aria-labelledby='dropdownMenuLink')
                      a.dropdown-item(href='#') Action
                      a.dropdown-item(href='#') Another action
                      a.dropdown-item(href='#') Something else here
            hr
            .btn-group
              button.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Primary
              .dropdown-menu(x-placement='bottom-start', style='position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;')
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Secondary
              .dropdown-menu(x-placement='bottom-start', style='position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;')
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-success.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Success
              .dropdown-menu(x-placement='bottom-start', style='position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;')
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-info.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Info
              .dropdown-menu(x-placement='bottom-start', style='position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;')
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-warning.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Warning
              .dropdown-menu(x-placement='bottom-start', style='position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;')
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-danger.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Danger
              .dropdown-menu(x-placement='bottom-start', style='position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;')
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            hr
            .btn-group
              button.btn.btn-primary(type='button') Primary
              button.btn.btn-primary.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                span.sr-only Toggle Dropdown
              .dropdown-menu(x-placement='bottom-start', style='position: absolute; transform: translate3d(71px, 34px, 0px); top: 0px; left: 0px; will-change: transform;')
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-secondary(type='button') Secondary
              button.btn.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                span.sr-only Toggle Dropdown
              .dropdown-menu(x-placement='bottom-start', style='position: absolute; transform: translate3d(89px, 34px, 0px); top: 0px; left: 0px; will-change: transform;')
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-success(type='button') Success
              button.btn.btn-success.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                span.sr-only Toggle Dropdown
              .dropdown-menu
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-info(type='button') Info
              button.btn.btn-info.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                span.sr-only Toggle Dropdown
              .dropdown-menu
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-warning(type='button') Warning
              button.btn.btn-warning.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                span.sr-only Toggle Dropdown
              .dropdown-menu
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            .btn-group
              button.btn.btn-danger(type='button') Danger
              button.btn.btn-danger.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                span.sr-only Toggle Dropdown
              .dropdown-menu
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            // /btn-group
            hr
            .btn-toolbar(role='toolbar')
              .btn-group
                button.btn.btn-secondary.btn-lg.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                  | Large button
                .dropdown-menu
                  a.dropdown-item(href='#') Action
                  a.dropdown-item(href='#') Another action
                  a.dropdown-item(href='#') Something else here
                  .dropdown-divider
                  a.dropdown-item(href='#') Separated link
              // /btn-group
              .btn-group.ml-2
                button.btn.btn-lg.btn-secondary(type='button') Large split button
                button.btn.btn-lg.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                  span.sr-only Toggle Dropdown
                .dropdown-menu
                  a.dropdown-item(href='#') Action
                  a.dropdown-item(href='#') Another action
                  a.dropdown-item(href='#') Something else here
                  .dropdown-divider
                  a.dropdown-item(href='#') Separated link
              // /btn-group
            // /btn-toolbar
            hr
            .btn-toolbar(role='toolbar')
              .btn-group
                button.btn.btn-secondary.btn-sm.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                  | Small button
                .dropdown-menu
                  a.dropdown-item(href='#') Action
                  a.dropdown-item(href='#') Another action
                  a.dropdown-item(href='#') Something else here
                  .dropdown-divider
                  a.dropdown-item(href='#') Separated link
              // /btn-group
              .btn-group.ml-2
                button.btn.btn-sm.btn-secondary(type='button') Small split button
                button.btn.btn-sm.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                  span.sr-only Toggle Dropdown
                .dropdown-menu
                  a.dropdown-item(href='#') Action
                  a.dropdown-item(href='#') Another action
                  a.dropdown-item(href='#') Something else here
                  .dropdown-divider
                  a.dropdown-item(href='#') Separated link
              // /btn-group
            // /btn-toolbar
            hr
            .bd-example
              .btn-group.dropup
                button.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                  | Dropup
                .dropdown-menu(x-placement='top-start', style='position: absolute; transform: translate3d(0px, -2px, 0px); top: 0px; left: 0px; will-change: transform;')
                  a.dropdown-item(href='#') Action
                  a.dropdown-item(href='#') Another action
                  a.dropdown-item(href='#') Something else here
                  .dropdown-divider
                  a.dropdown-item(href='#') Separated link
              .btn-group.dropup
                button.btn.btn-secondary(type='button')
                  | Split dropup
                button.btn.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                  span.sr-only Toggle Dropdown
                .dropdown-menu(x-placement='top-start', style='position: absolute; transform: translate3d(101px, -188px, 0px); top: 0px; left: 0px; will-change: transform;')
                  a.dropdown-item(href='#') Action
                  a.dropdown-item(href='#') Another action
                  a.dropdown-item(href='#') Something else here
                  .dropdown-divider
                  a.dropdown-item(href='#') Separated link
    .row
      .col
        .card
          .card-header
            i.fa.fa-align-justify
            |  Menus
          .card-body
            .dropdown
              button#dropdownMenu2.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Dropdown
              .dropdown-menu(aria-labelledby='dropdownMenu2', x-placement='bottom-start', style='position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;')
                button.dropdown-item(type='button') Action
                button.dropdown-item(type='button') Another action
                button.dropdown-item(type='button') Something else here
            hr
            .btn-group
              button.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | This dropdown's menu is right-aligned
              .dropdown-menu.dropdown-menu-right
                button.dropdown-item(type='button') Action
                button.dropdown-item(type='button') Another action
                button.dropdown-item(type='button') Something else here
            hr
            .dropdown
              button#dropdownMenu3.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Menu header
              .dropdown-menu
                h6.dropdown-header Dropdown header
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
            hr
            .dropdown
              button#dropdownMenu4.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Menu divider
              .dropdown-menu
                a.dropdown-item(href='#') Action
                a.dropdown-item(href='#') Another action
                a.dropdown-item(href='#') Something else here
                .dropdown-divider
                a.dropdown-item(href='#') Separated link
            hr
            .dropdown
              button#dropdownMenu5.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Menu forms
              .dropdown-menu
                form.px-4.py-3
                  .form-group
                    label(for='exampleDropdownFormEmail1') Email address
                    input#exampleDropdownFormEmail1.form-control(type='email', placeholder='email@example.com')
                  .form-group
                    label(for='exampleDropdownFormPassword1') Password
                    input#exampleDropdownFormPassword1.form-control(type='password', placeholder='Password')
                  .form-check
                    label.form-check-label
                      input.form-check-input(type='checkbox')
                      |  Remember me
                  button.btn.btn-primary(type='submit') Sign in
                .dropdown-divider
                a.dropdown-item(href='#') New around here? Sign up
                a.dropdown-item(href='#') Forgot password?
            hr
            .dropdown
              button#dropdownMenu5.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                | Disabled item
              .dropdown-menu
                a.dropdown-item(href='#') Regular link
                a.dropdown-item.disabled(href='#') Disabled link
                a.dropdown-item(href='#') Another link
